<template>
  <div>
    <van-list
      v-model="loading"
      class="scroll-load"
      :finished="finished"
      :immediate-check="false"
      :offset="100"
      v-if="items"
      @load="loadMore"
    >
      <van-cell-group v-for="(item, i) in items" :key="i" class="interval_bot">
        <van-cell>
          <item-card-big
            :goods="item"
            :showCartBtn="true"
            @doclick="toGoods(item)"
            @addCart="addCart"
            @showHideVideo="showHideVideo"
          />
        </van-cell>
      </van-cell-group>
    </van-list>

    <is-empty v-if="isEmpty">抱歉，没有找到符合条件商品</is-empty>
  </div>
</template>
<script>
import ItemCardBig from "@/vue/components/item-card-big/";
import loadMore from "@/vue/mixin/list-load-more";
import scrollFixed from "@/vue/mixin/scroll-fixed";
import { ALL_GOODS, GOODS_STOCK } from "@/api/shop";
import IsEmpty from "@/vue/components/is-empty/";
import { Stepper } from "vant";

export default {
  mixins: [loadMore, scrollFixed],
  name: "goods-list",
  props: {
    title: String,
    shopId: [String, Number],
    type: Number,
    keyword: String,
    categoryId: [String, Number]
  },

  data() {
    const centerId = this.getUser().centreId;
    return {
      centerId,
      isLoading: false,
      videoUrl: "", //视频地址
      videoShow: false, //视频右侧弹出
      videoGoods: "", //子组件向父组件传来的视频商品信息
      videoCartNum: "", //视频购物车数量
      cartPlus: true
    };
  },

  components: {
    [ItemCardBig.name]: ItemCardBig,
    [IsEmpty.name]: IsEmpty,
    [Stepper.name]: Stepper
  },

  watch: {
    keyword() {
      this.resetInit();
    },
    //又添加
    "videoGoods.cartNum": function() {
      this.videoCartNum = this.videoGoods.cartNum;
    }
  },

  created() {
    this.resetInit();
  },

  activated() {
    let id = [];
    this.items.forEach(goods => {
      id.push(goods.id);
    });

    if (id.length === 0) {
      return;
    }

    this.$reqGet(
      GOODS_STOCK,
      { id, memberId: this.user.id, shopId: this.user.upshopTid },
      { hideLoading: true }
    ).then(res => {
      const stocks = res.data.data;
      window.serverTime = res.data.time;
      const allorder = res.data.allorder;

      //更新团长购买指数
      if (allorder) {
        let shop = this.getShop();
        shop.allorder = allorder;
        this.saveShop(shop);
      }

      this.items.forEach(goods => {
        const stock = stocks[goods.id];

        if (stock) {
          goods.salesreal = stock.sales;
          goods.total = stock.stock;
          goods.cartNum = stock.cartNum;
        }
      });
    });
  },

  methods: {
    // 视频加入购物车
    videoAddCart() {
      this.$emit("addCart", this.videoGoods);
    },
    // 购物车数量的变化
    onNumChange() {
      const num = this.videoCartNum - this.videoGoods.cartNum;
      if (num === 0) {
        return;
      }

      this.$emit("addCart", this.videoGoods, null, num > 0);
      this.$nextTick(() => {
        this.cartNum = this.videoGoods.cartNum;
      });
    },
    // 显示视频
    showHideVideo(el) {
      this.videoGoods = el;
      this.videoCartNum = this.videoGoods.cartNum;
      this.videoUrl = el.videourl;
      this.videoShow = true;
      this.$nextTick(() => {
        this.$refs.video.play();
      });
    },
    //点击关闭，隐藏掉视频
    hideVideo() {
      this.$refs.video.pause();
      // 关闭视频时,是视频从头开始播放
      this.$refs.video.currentTime = 0;
      this.videoShow = false;
    },
    initData() {
      return this.$reqGet(
        ALL_GOODS,
        {
          centreId: this.centerId,
          teamId: this.shopId,
          mid: this.user.id,
          title: this.keyword,
          ishot: this.type === 1 ? 1 : undefined,
          isvip: this.type === 2 ? 1 : undefined,
          isNewYearGifts: this.type === 3 ? 1 : undefined,
          categoryId: this.categoryId,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        },
        {
          hideLoading: true
        }
      ).then(res => {
        const { rows, total } = res.data.data;
        this.items.push(...rows);
        return {
          pageCount: rows.length,
          totalCount: total
        };
      });
    },

    toGoods(item) {
      this.$router.push({ path: `/items/detail/${item.id}` });
    },

    addCart(item, sku, plus) {
      this.$emit("addCart", item, sku, plus);
    }
  }
};
</script>

<style lang="scss" scoped>
.videoCon {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  .videoSon {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    .closeVideo {
      position: absolute;
      right: 25px;
      top: -32px;
      color: #ff0066;
      font-size: 14px;
    }
  }
  .videoCart {
    text-align: center;
    margin-top: 12px;
    .cart_button {
      color: white;
      background-color: $green;
      border-radius: 30px;
      height: 34px;
      line-height: initial;
    }
    .cart_info {
      color: white;
    }
  }
}
.interval_bot {
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.videoCart {
  .van-stepper__input {
    margin-top: -2px;
  }
}
</style>

